<template>
  <div class="gjf-data">
    <div class="gjf-data-header"></div>
    <div class="gjf-data-mess">
      <div class="gjf-data-mess-img">
        <img src="../../public//images/doctor.jpg" alt />
      </div>
      <div class="gjf-data-mess-mess">
        <h3>张后杰大夫</h3>
        <p style="fontSize:13px;marginTop:10px">主治医生</p>
        <p style="fontSize:13px;marginTop:10px">擅长：外感热病、咳喘痰鸣、内伤脾胃、风湿痹痛、急症阑尾、肝胆胰腺、</p>
      </div>
    </div>

    <div class="gjf-data-calvan">
      <van-calendar @confirm="onConfirm" :poppable="false" row-height="40" :show-confirm="false" />
    </div>
    <div class="gjf-data-footer">
        <h4>温馨提示</h4>
        <p style="fontSize:13px;marginTop:7px">若预约满或需要预约7天后的门诊，可拨打电话预约。</p>
        <p style="fontSize:13px;marginTop:7px">浦东店：021-58762557</p>
        <p style="fontSize:13px;marginTop:7px">浦西店：021-53028359</p>
    </div>
    <van-button type="primary" round color="rgb(128, 47, 0)" block>下一步</van-button>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      date: ""
    };
  },
  computed: {},
  watch: {},
  methods: {
    formatDate(date) {
      return `${date.getMonth() + 1}/${date.getDate()}`;
    },
    onConfirm(date) {
      
      this.date = this.formatDate(date);
    }
  }
};
</script>

<style scoped>
.gjf-data {
  width: 100%;

}
.gjf-data-header {
  width: 100%;
  height: 5rem;
  background: darkgoldenrod;
}
.gjf-data-mess {
  width: 80%;
  height: 8.75rem;
  margin: -3.125rem auto 0px;
  display: flex;
  justify-content: space-around;
  background: white;
  border-radius: 0.625rem;
  border-bottom: 1px solid gray;
}
.gjf-data-mess-img {
  flex: 2;
  height: 75%;
  display: flex;
  justify-content: center;
  
}
.gjf-data-mess-img img {
  width: 80%;
  /* height: 45%; */
  border-radius: 50%;
  margin-top: 1.25rem;
}
.gjf-data-mess-mess {
  flex: 3;
  height: 100%;
}
.gjf-data-calvan {
  width: 80%;
  margin: 1.25rem auto ;
  height: 310px;
  overflow: scroll;
}
</style>
